<template>
  <div class="userinfo">
    <div class="userinfo-title">
      <div>
        <h3>Account Overview</h3>
        <p style="font-size: 15px;">{{username}}</p>
      </div>
      <el-button @click="loginOut">Log Out</el-button>
    </div>

    <div class="userinfo-content">
      <el-button @click="to_shop">
        Continue shopping
      </el-button>
    </div>

    <div class="userinfo-description">
      <span>No Orders</span>
    </div>
  </div>


  <Footer/>
</template>


<script>
import { ref, toRefs,reactive,onMounted } from 'vue';
import axios from 'axios'
import {useModelWrapper} from '@/components/use-model-wrapper.js'
import {inject} from "vue";
import Footer from "@/views/Footer/Footer.vue";
import {useUserStore} from '@/status/pinia/user'
import router from "@/router/index.js";
import { useRouter } from 'vue-router'

  export default {
    name: 'userinfo',
    setup(){
      const routers = useRouter()
      const reload = inject("reload");
      const userStore = useUserStore()
      const data = reactive({
        username: ref(null)
      })


      const getUserInfo = () => {
        const local = JSON.parse(localStorage.getItem('loginData'))
        data.username = local.username
      }

      const loginOut = () => {
        // 删除本地缓存
        localStorage.removeItem('loginData')
        userStore.userinfo = {}
        routers.push({
          path: "/login"
        })
        window.location.reload();
      }

      const to_shop = () => {
        routers.push({
          path: "/accessories"
        })
      }

      onMounted(() => {
        getUserInfo()
      })

      return{
        ...toRefs(data),
        getUserInfo,
        loginOut,
        reload,
        to_shop
      }
    },
    components: {
      Footer
    }
  }
</script>



<style scoped>
.userinfo {
  width: 100%;
  height: auto;
}

.userinfo-title {
  width: 400px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  margin-left: 580px;
}

.userinfo-title h3 {
  font-size: 20px;
}


.userinfo-title div {
  margin-right: 500px;
}

.userinfo-content {
  height: 100%;
  width: 100%;
  align-items: center;
  text-align: center;
  margin-top: 200px;
  margin-bottom: 200px;
}

.userinfo-content .el-button {
  background: #e60033;
  color: white;
}

.userinfo-description {
  margin-right: 620px;
}

.userinfo-description {
  width: 100%;
  height: auto;
  margin-bottom: 60px;
}

.userinfo-description span {
  margin-right: 620px;
}

.el-button {
  color: black;
  border-radius: 15px;
  width: 150px;
}

.el-button:hover {
  background: #e60033;
  color: white;
}

</style>